<template>
    <el-dialog :title="editOrAdd=='edit' ? '编辑分组' : '新增分组'" :visible="dialogEdit" @close="close">
        <el-form ref="form" label-width="100px" :rules="rules" :model="form">
            <el-form-item label="分组类型" prop="type">
                <el-select :disabled="isEdit" class="filter-item" placeholder="请选择分组类型" v-model="form.type" style="width: 100%;">
                    <el-option v-for="(item, index) in groupTypeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分组名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入分组名称"></el-input>
            </el-form-item>
            <el-form-item label="可管理品类" prop="categoryTypes" v-if="form.type == 1">
                <el-select clearable multiple class="filter-item" placeholder="请选择可管理品类" v-model="form.categoryTypes" style="width: 100%;">
                    <el-option v-for="(item, index) in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="组长" prop="manager_uid" v-if="form.type == 1">
                <el-select clearable filterable class="filter-item" placeholder="请选择组长" v-model="form.manager_uid" style="width: 100%;">
                    <el-option v-for="(item, index) in employeeOptions" :disabled="item.disabled" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
            <el-button plain @click="close">取消</el-button>
        </span>
    </el-dialog>
</template>

<script>
  import { userGetList } from '@/api/user'
  import { factoryGroupGet, factoryGroupUpdate, factoryGroupAdd } from '@/api/factory'

  export default {
    name: 'GroupManage',
    props: ['groupId', 'editOrAdd', 'dialogEdit'],
    data() {
      return {
        defaultForm: {
          name: '',
          manager_uid: '',
          categoryTypes: [],
          type: ''
        },
        form: {
          name: '',
          manager_uid: '',
          categoryTypes: [],
          type: ''
        },
        isEdit: false,
        groupTypeOptions: [{ name: '整理组', id: '1' }, { name: '其他', id: '2' }],
        typeOptions: [{ name: '布草', id: 1 }, { name: '工作服', id: 2 }, { name: '手术服', id: 3 }, { name: '传染服', id: 4 }],
        employeeOptions: [],
        rules: {
          type: [
            { required: true, message: '请选择分组类型', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入分组名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          categoryTypes: [
            { required: true, message: '请选择可管理品类', trigger: 'blur' }
          ]
        }
      }
    },
    created: function() {
      this.form = this.defaultForm
      this.getEmployees()
    },
    watch: {
      dialogEdit(val) {
        if (val) {
          this.initForm()
        }
      }
    },
    methods: {
      getEmployees() {
        userGetList({ page: 1, size: 500, role: 5 }).then(response => {
          response.data.list.forEach((item) => {
            item.disabled = item.gid && item.gid !== '0'
          })
          this.employeeOptions = response.data.list
        })
      },
      initForm() {
        if (this.editOrAdd === 'add') {
          this.isEdit = false
          this.form = this.defaultForm
          this.$nextTick(() => {
            this.$refs['form'] && this.$refs['form'].resetFields()
          })
        } else {
          this.isEdit = true
          this.getInfo()
          this.$nextTick(() => {
            this.$refs['form'] && this.$refs['form'].clearValidate()
          })
        }
      },
      getInfo() {
        factoryGroupGet({ id: this.groupId }).then(response => {
          if (response) {
            this.form = response.data
            this.form.manager_uid = '' + this.form.manager_uid === '0' ? '' : this.form.manager_uid + ''
          }
        })
      },
      close() {
        this.$emit('update:dialogEdit', false)
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.isEdit) {
              factoryGroupUpdate(this.form).then(response => {
                if (response) {
                  this.$message({ message: '修改分组成功', type: 'success', showClose: true })
                  this.$emit('update:dialogEdit', false)
                  this.$emit('refreshList')
                  this.getEmployees()
                }
              })
            } else {
              this.form.region = this.region
              factoryGroupAdd(this.form).then(response => {
                if (response) {
                  this.$message({ message: '添加分组成功', type: 'success', showClose: true })
                  this.$emit('update:dialogEdit', false)
                  this.$emit('refreshList')
                  this.getEmployees()
                }
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
